<template>
    <div>
        <el-form label-position="left" label-width="100px" size="mini" inline>
            <el-form-item label="规则ID" label-width="60px">
                <el-input v-model="ruleInfo.config_id" size="mini" style="width: 80px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item label="规则类别" label-width="70px">
                <el-select v-model="ruleInfo.config_type" placeholder="请选择" size="mini" style="width: 100px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="列表页" value="0" key="0"></el-option>
                    <el-option label="详情页" value="1" key="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="描述" label-width="40px">
                <el-input v-model="ruleInfo.desc" size="mini" style="width: 150px" @keyup.enter.native="search" title="支持回车查询"></el-input>
            </el-form-item>
            <el-form-item label="是否加载图片">
                <el-select v-model="ruleInfo.load_image" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否模拟浏览">
                <el-select v-model="ruleInfo.phantomJs" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否使用代理">
                <el-select v-model="ruleInfo.use_proxy" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="是否是附件" label-width="80px">
                <el-select v-model="ruleInfo.is_attach" placeholder="请选择" size="mini" style="width: 80px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="是" value="1" key="1"></el-option>
                    <el-option label="否" value="0" key="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="编码" label-width="40px">
                <el-select v-model="ruleInfo.encoding" size="mini" placeholder="请选择" style="width:100px" @change="search">
                    <el-option label="全部" value="" key=""></el-option>
                    <el-option label="utf8" value="utf8" key="utf8"></el-option>
                    <el-option label="gbk" value="gbk" key="gbk"></el-option>
                    <el-option label="gb2313" value="gb2313" key="gb2313"></el-option>
                    <el-option label="ascii" value="ascii" key="ascii"></el-option>
                    <el-option label="unicode" value="unicode" key="unicode"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" @click="search">查询&nbsp;<c-icon name="search" scale="0.7"></c-icon></el-button>
                <el-button type="danger" size="mini" @click="reset">重置&nbsp;<c-icon name="undo" scale="0.7"></c-icon></el-button>
            </el-form-item>
        </el-form>

        <el-table :data="ruleList.slice((pageNo -1) * pageSize, ((pageNo -1) * pageSize) + pageSize)" 
            @sort-change = "sortChange"
            v-loading="listLoading" element-loading-text="列表加载中..." style="width: 100%" max-height="680" border fit highlight-current-row>
            <el-table-column align="center" width="120px" prop="" label="操作" fixed>
                <template slot-scope="scope">
                    <el-button type="text" size="mini" icon="edit" @click="$router.push(`/ruleConf/${scope.row.config_id}`)" title="编辑">编辑</el-button>
                    <el-button type="text" size="mini" icon="edit" @click="deleteRule(scope.row.config_id, scope.row.desc)" title="物理删除">物理删除</el-button>
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="config_id" label="规则ID" fixed sortable='custom'></el-table-column>
            <el-table-column align="center" width="100px" prop="config_type" label="规则类别" show-overflow-tooltip fixed sortable='custom'>
                <template slot-scope="scope">
                    <span v-if="scope.row.config_type == 1">详情页</span>
                    <span v-else-if="scope.row.config_type == 0">列表页</span>
                </template>
            </el-table-column>
            <el-table-column align="left" width="250px" prop="desc" label="描述" show-overflow-tooltip fixed sortable='custom'></el-table-column>
            <el-table-column align="left" width="300px" prop="url_pattern" label="url筛选正则" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="image_pattern" label="图片css选择器" sortable='custom'></el-table-column>
            <el-table-column align="left" width="200px" prop="query_js" label="注入操作js" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="left" width="200px" prop="config_details" label="配置详情" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="left" width="200px" prop="addition_urls" label="预注入url" show-overflow-tooltip sortable='custom'></el-table-column>

            <el-table-column align="center" width="100px" prop="encoding" label="编码" sortable='custom'></el-table-column>
            <el-table-column align="center" width="130px" prop="cookie" label="自定义cookie" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="useragent" label="自定义ua" show-overflow-tooltip sortable='custom'></el-table-column>
            <el-table-column v-for="(col, index) in booleanColumns" :key="index" align="center" :prop="col.prop"
                             width="150px" :label="col.label" sortable='custom'>
                <template slot-scope="scope">
                    <c-icon v-if="scope.row[col.prop] == 1" name="check" style="color:#00AE66;"></c-icon>
                    <c-icon v-else name="times" style="color:#e74c3c;"></c-icon>
                </template>
            </el-table-column>
            <el-table-column align="center" width="150px" prop="create_time" label="创建时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.create_time)}}
                </template>
            </el-table-column>
            <el-table-column align="center" width="100px" prop="updator" label="更新人" sortable='custom'></el-table-column>
            <el-table-column align="center" width="150px" prop="update_time" label="更新时间" sortable='custom'>
                <template slot-scope="scope">
                    {{formatDate(scope.row.update_time)}}
                </template>
            </el-table-column>
        </el-table>
        <el-row type="flex" justify="start" style="padding:10px 0;">
            <el-pagination
                v-show = "ruleList.length"
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="pageNo"
                :page-sizes="[30, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="ruleList.length">
            </el-pagination>
        </el-row>
    </div>
</template>
<script>
import { getRuleList, deleteRuleInfo } from '../../api/crawl.js';
import dayjs from 'dayjs';
import icon from 'vue-awesome';
import lodash from 'lodash';
export default {
    data(){
        return {
            listLoading : false,
            allRuleList : [],
            ruleList : [],
            booleanColumns : [//布尔类型的字段，汇总
                {prop : 'load_image', label : '是否加载图片'},
                {prop : 'phantomJs', label : '是否模拟浏览'},
                {prop : 'use_proxy', label : '是否使用代理'},
                {prop : 'is_attach', label : '是否是附件'}
            ],
            /* 分页相关 */
            pageNo : 1,
            pageSize : 30,
            /* 查询 */
            ruleInfo : {
                config_id : '',
                config_type : '',
                desc : '',
                url_pattern : '',
                query_js : '',
                config_details : '',
                addition_urls : '',
                encoding : '',
                useragent : '',
                cookie : '',
                load_image : '',
                image_pattern : '',
                phantomJs : '',
                use_proxy : '',
                is_attach : '',
            },
        }
    },
    components: { 
        'c-icon' : icon
    },
    created(){
        this.initRuleList();
    },
    watch: {
    },
    methods: {
        initRuleList(){
            this.listLoading = true;
            getRuleList().then(data=>{
                console.log('getRuleList---', data)
                this.listLoading = false;
                this.ruleList = data.rows;
                this.allRuleList = data.rows;
            }).catch(e=>{
                console.error(e);
            })
        },
        search(){
            let resultList = this.allRuleList;
            console.log('this.ruleInfo------', this.ruleInfo)
            if(this.ruleInfo.config_id){
                resultList = resultList.filter(item => item.config_id === Number(this.ruleInfo.config_id));
            }
            if(this.ruleInfo.config_type){
                resultList = resultList.filter(item => item.config_type === Number(this.ruleInfo.config_type));
            }
            if(this.ruleInfo.load_image){
                resultList = resultList.filter(item => item.load_image === Number(this.ruleInfo.load_image));
            }
            if(this.ruleInfo.phantomJs){
                resultList = resultList.filter(item => item.phantomJs === Number(this.ruleInfo.phantomJs));
            }
            if(this.ruleInfo.use_proxy){
                resultList = resultList.filter(item => item.use_proxy === Number(this.ruleInfo.use_proxy));
            }
            if(this.ruleInfo.is_attach){
                resultList = resultList.filter(item => item.is_attach === Number(this.ruleInfo.is_attach));
            }
            if(this.ruleInfo.encoding){
                resultList = resultList.filter(item => item.encoding && item.encoding.toLowerCase() === this.ruleInfo.encoding.toLowerCase());
            }
            if(this.ruleInfo.desc){
                resultList = resultList.filter(item => item.desc.toLowerCase().indexOf(this.ruleInfo.desc.toLowerCase()) > -1);
            }
            //console.log('resultList----',resultList)
            this.ruleList = resultList;
            this.pageNo = 1;
        },
        reset(){
            this.ruleInfo.config_id = '';
            this.ruleInfo.config_type = '';
            this.ruleInfo.load_image = '';
            this.ruleInfo.phantomJs = '';
            this.ruleInfo.use_proxy = '';
            this.ruleInfo.is_attach = '';
            this.ruleInfo.encoding = '';
            this.ruleInfo.desc = '';
            this.initRuleList();
            this.pageNo = 1;
        },
        formatDate(dateTime){
            if(!dateTime){
                return '--';
            }
            return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss');
        },
        sizeChange(pageSize){
            //console.log('pageSize:',pageSize);
            this.pageSize = pageSize;
        },
        currentChange(pageNo){
            //console.log('pageNo:',pageNo);
            this.pageNo = pageNo;
        },
        edit(scope){
            console.log(scope)
        },
        //排序
        sortChange(data){
            console.log(data)
            let {order, prop} = data;
            //如果是顺序则按照顺序排，否则就按照倒序排
            if(order === 'descending'){
                this.ruleList = lodash.orderBy(this.ruleList, [prop], 'desc');
            }else{
                this.ruleList = lodash.orderBy(this.ruleList, [prop], 'asc');
            }
            this.pageNo = 1;
        },
        //物理删除
        deleteRule(config_id, desc){
            this.$confirm(`确定彻底删除规则 [${desc}] ？删除后不可恢复！`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteRuleInfo(config_id).then(data=>{
                    console.log('deleteRuleInfo---', data)
                    if(data){
                        //提示删除成功
                        this.$alert('删除成功！', '提示', {
                            confirmButtonText: '确定'
                        });
                        this.initRuleList();
                    }
                }).catch(e=>{
                    console.error(e);
                })
            }).catch((e) => {
                console.error(e);
            });
        }
    }
};
</script>